<template>
  <view class="order-detail-container">
    <!-- 状态头部 -->
    <view class="status-header">
      <view class="status-icon">
        <uv-icon name="checkmark-circle" color="#52C41A" size="48" />
      </view>
      <view class="status-info">
        <text class="status-text">已完成</text>

      </view>
    </view>

    <!-- 地图区域 -->
    <view class="map-section">
      <view class="map-container">
        <map id="orderMap1" style="width: 100%;height: 400rpx" :latitude="mapCenter.latitude"
          :longitude="mapCenter.longitude"  :markers="mapMarkers" :polyline="mapPolyline"></map>

      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="info-card">
      <view class="user-info">
        <view class="avatar">
          <uv-avatar :src="userInfo.avatar"></uv-avatar>
        </view>
        <view class="user-details">
          <text class="user-name">{{ orderInfo.userName }}</text>
          <text class="user-phone">{{ orderInfo.userPhone }}</text>
        </view>
        <view class="license-plate">
          <text class="plate-text">{{ orderInfo.licensePlate }}</text>
        </view>
      </view>
    </view>

    <!-- 派送地址卡片 -->
    <view class="info-card">
      <view class="address-info">
        <view class="address-icon">
          <uv-icon name="map-fill" :size="24" :color="'#FF6B35'" />
        </view>
        <view class="address-details">
          <view class="address-label">派送地址</view>
          <view class="address-text">{{ orderInfo.deliveryAddress }}</view>
        </view>
      </view>
    </view>

    <!-- 产品信息卡片 -->
    <view class="info-card">
      <view class="product-info">
        <view class="product-icon">
          <view class="oil-badge">
            <image :src="orderInfo.goods_image" mode="aspectFill" style="width: 100%; height: 100%;" />
          </view>
        </view>
        <view class="product-details">
          <text class="product-name">{{ orderInfo.productName }}</text>
          <text class="product-quantity">用油量: {{ orderInfo.quantity }}升</text>
        </view>
        <view class="product-price">
          <text class="price-symbol">¥</text>
          <text class="price-amount">{{ orderInfo.goods_money }}</text>
        </view>
      </view>
    </view>

    <!-- 订单信息卡片 -->
    <view class="info-card">
      <view class="order-details">
        <view class="detail-item">
          <text class="detail-label">下单时间:</text>
          <text class="detail-value">{{ orderInfo.orderTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">用油时间:</text>
          <text class="detail-value">{{ orderInfo.usageTime }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">下单方式:</text>
          <text class="detail-value">{{ orderInfo.paymentMethod == 'remaining' ? '余量下单' : '余额下单' }}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">实际用油量:</text>
          <text class="detail-value">{{ orderInfo.actualQuantity }}升</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">实际金额:</text>
          <text class="detail-value">{{ orderInfo.actualAmount }}元</text>
        </view>
      </view>
    </view>

    <!-- 凭证信息 -->
    <view class="info-card">
      <view class="voucher-info">
        <text class="voucher-title">凭证信息</text>
        <view class="voucher-images">
          <view v-for="(voucher, index) in imgList" :key="index" class="voucher-image">
            <image :src="voucher" mode="aspectFill" />
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { UserInfoManager } from '@/utils/userInfo'
import { formatDateTime } from '@/utils/dateTime'
import { useRequest } from '@/api'

const { API_JIDAN_DETAIL_GET } = useRequest()
const userInfo = UserInfoManager.getUserInfo()

// 路由参数
const orderId = ref('')
const loading = ref(false)

// 订单信息类型定义
interface OrderInfo {
  userName: string
  userPhone: string
  licensePlate: string
  deliveryAddress: string
  productName: string
  quantity: number
  goods_money: string
  orderTime: string
  usageTime: string
  paymentMethod: string
  actualQuantity: number
  actualAmount: string
  voucher: string[]
  completionTime: string
  orderLat: number
  orderLng: number,
  goods_image: string
}

// 订单信息
const orderInfo = ref<OrderInfo>({
  userName: '',
  userPhone: '',
  licensePlate: '',
  deliveryAddress: '',
  productName: '',
  quantity: 1,
  goods_money: '',
  orderTime: '',
  usageTime: '',
  paymentMethod: '',
  actualQuantity: 0,
  actualAmount: '',
  voucher: [],
  completionTime: '',
  orderLat: 0,
  orderLng: 0,
  goods_image: ''
})
const mapCenter = ref({
  latitude: 39.9042,
  longitude: 116.4074
})
const ensureValidCenter = () => {
  // 高德地图有效经纬度范围简单校验
  const lat = Number(mapCenter.value.latitude)
  const lng = Number(mapCenter.value.longitude)
  if (!isFinite(lat) || !isFinite(lng) || Math.abs(lat) < 0.0001 || Math.abs(lng) < 0.0001) {
    // 回退到北京天安门
    mapCenter.value = { latitude: 39.9042, longitude: 116.4074 }
  }
}
const imgList = ref([])
const getOrderDetail = async () => {
  if (!orderId.value) {
    uni.showToast({
      title: '订单ID不能为空',
      icon: 'none'
    })
    return
  }

  loading.value = true
  try {
    const params = {
      id: orderId.value,
      isdriver: UserInfoManager.lastrole()
    }
    const res = await API_JIDAN_DETAIL_GET(params)
    if (res.code === 1) {
      // 兼容处理凭证：可能是数组、字符串，或逗号分隔的字符串
      const rawVouchers = (res.data && (res.data.vouchers ?? res.data.voucher)) || []
      const voucherUrls = Array.isArray(rawVouchers)
        ? rawVouchers.filter((u: any) => typeof u === 'string' && u)
        : (typeof rawVouchers === 'string' && rawVouchers)
          ? rawVouchers.split(',').map((s: string) => s.trim()).filter(Boolean)
          : []
      orderInfo.value = {
        userName: res.data.username || '',
        userPhone: res.data.mobile || '',
        licensePlate: res.data.carnumber || '',
        deliveryAddress: res.data.address_detail || '',
        productName: res.data.goods_name || '-',
        quantity: res.data.usage || 1,
        goods_money: res.data.goods_money || '',
        orderTime: formatDateTime(res.data.order_time) || '',
        usageTime: formatDateTime(res.data.use_time) || '',
        paymentMethod: res.data.order_type || '余额下单',
        actualQuantity: res.data.real_usage || 0,
        actualAmount: res.data.real_goods_price || '',
        voucher: voucherUrls,
        completionTime: formatDateTime(res.data.completion_time) || formatDateTime(res.data.order_time) || '',
        orderLat: res.data.order_lat || 0,
        orderLng: res.data.order_lng || 0,
        goods_image: res.data.goods_image || ''
      }
      imgList.value = voucherUrls
      updateMapData()
    } 
  } catch (error) {
    
  } finally {
    loading.value = false
  }
}

const mapMarkers = ref<any[]>([])

const mapPolyline = ref<any[]>([])
const updateMapData = () => {
  const { orderLat, orderLng } = orderInfo.value

  if (orderLat && orderLng) {
    // 设置地图中心点
    mapCenter.value = {
      latitude: Number(orderLat),
      longitude: Number(orderLng)
    }
    ensureValidCenter()

    // 设置地图标记
    mapMarkers.value = [
      {
        id: 1,
        latitude: orderLat,
        longitude: orderLng,
        title: '配送地址',
        width: 20,
        height: 30,
        iconPath: '/static/images/map-pin-green.svg',
        callout: {
          content: orderInfo.value.deliveryAddress,
          color: '#333',
          fontSize: 14,
          borderRadius: 4,
          bgColor: '#fff',
          padding: 8,
          display: 'ALWAYS'
        }
      }
    ]
  } else {
    ensureValidCenter()
  }
}
onLoad((options: Record<string, any>) => {
  const id = options?.id
  if (id) {
    try { orderId.value = decodeURIComponent(String(id)) } catch { orderId.value = String(id) }
    getOrderDetail()
  }
})
</script>

<style lang="scss" scoped>
.order-detail-container {
  min-height: 100vh;
  background: #f6f7f9;
  padding: 20rpx;
  padding-bottom: 120rpx;
}

/* 状态头部 */
.status-header {
  display: flex;
  align-items: center;
  padding: 32rpx 24rpx;
  background: linear-gradient(to bottom, #f6ffed, #fffefd);
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .status-icon {
    margin-right: 24rpx;
  }

  .status-info {
    flex: 1;

    .status-text {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .completion-time {
      font-size: 26rpx;
      color: #52C41A;
      margin-top: 8rpx;
    }
  }
}

/* 地图区域 */
.map-section {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .map-container {
    position: relative;
    height: 400rpx;
    background: #f8f8f8;
    border-radius: 16rpx;
    overflow: hidden;

    

    .map-placeholder {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #999;

      .map-text {
        margin-top: 16rpx;
        font-size: 28rpx;
      }
    }

    .map-info {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      right: 20rpx;

      .destination {
        display: flex;
        align-items: center;
        margin-bottom: 16rpx;

        .pin {
          width: 32rpx;
          height: 32rpx;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 16rpx;

          &.orange-pin {
            background: rgba(255, 107, 53, 0.1);
          }
        }

        .location-text {
          flex: 1;
          font-size: 28rpx;
          color: #333;
          margin-right: 16rpx;
        }

        .arrival-time {
          font-size: 24rpx;
          color: #52C41A;
          font-weight: 600;
        }
      }
    }

    .map-disclaimer {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      font-size: 22rpx;
      color: #999;
    }
  }
}

/* 信息卡片 */
.info-card {
  background: #fff;
  margin-bottom: 20rpx;
  padding: 32rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

  .user-info {
    display: flex;
    align-items: center;

    .avatar {
      margin-right: 24rpx;
    }

    .user-details {
      flex: 1;

      .user-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .user-phone {
        font-size: 26rpx;
        color: #666;
      }
    }

    .license-plate {
      .plate-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }

  .address-info {
    display: flex;
    align-items: flex-start;

    .address-icon {
      margin-right: 24rpx;
      margin-top: 4rpx;
    }

    .address-details {
      flex: 1;

      .address-label {
       
        margin-bottom: 12rpx;
      }

      .address-text {
        font-size: 28rpx;
        color: #333;
        line-height: 36rpx;
        font-weight: 600;
      }
    }
  }

  .product-info {
    display: flex;
    align-items: center;

    .product-icon {
      margin-right: 24rpx;

      .oil-badge {
        width: 80rpx;
        height: 80rpx;
        background: #fff3ed;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .oil-type {
          font-size: 24rpx;
          font-weight: 600;
          color: #333;
          margin-top: 4rpx;
        }
      }
    }

    .product-details {
      flex: 1;

      .product-name {
        display: block;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        margin-bottom: 8rpx;
      }

      .product-quantity {
        font-size: 26rpx;
        color: #666;
      }
    }

    .product-price {
      text-align: right;

      .price-symbol {
        font-size: 28rpx;
        color: #FF6B35;
      }

      .price-amount {
        font-size: 36rpx;
        font-weight: 600;
        color: #FF6B35;
      }
    }
  }

  .order-details {
    .detail-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-label {
        font-size: 26rpx;
        color: #666;
      }

      .detail-value {
        font-size: 26rpx;
        color: #333;
      }
    }
  }

  .voucher-info {
    .voucher-title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 16rpx;
    }

    .voucher-images {
      display: flex;
      flex-wrap: wrap;
      gap: 16rpx;

      .voucher-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 8rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

/* 底部操作区域 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 40rpx;
  border-top: 1rpx solid #f0f0f0;
  z-index: 999;

  .completed-info {
    text-align: center;
    padding: 20rpx 0;

    .completed-text {
      display: block;
      font-size: 32rpx;
      font-weight: 600;
      color: #52C41A;
      margin-bottom: 8rpx;
    }

    .completed-subtext {
      font-size: 26rpx;
      color: #666;
    }
  }
}
</style>